<template>

   <div style="height: 500px;width: 100%">
      <el-amap vid="amapDemo" :center="mapCenter" :zoom="12" class="amap-demo">
        <el-amap-marker v-if="markers!=null"  :position="markers" ></el-amap-marker>
      </el-amap>
     <div style="position: absolute;top: 80px;">
       <div style="display: flex;justify-content: flex-start">
         <AreaSelect :value.sync="area" />
         <el-amap-search-box :search-option="searchOption" :on-search-result="onSearchResult"  style="height: 36px; margin-left: 20px"/>
       </div>
     </div>
    </div>


</template>

<style>


</style>

<script>
  import  AreaSelect from '@/components/AreaSelect'
  export default {
    components: {
      AreaSelect
    },
    props:['address','area'],
    data() {
      return {
        markers:null,
        searchOption: {
          city: '全国',
          citylimit: true
        },
        mapCenter: [121.59996, 31.197646]
      };
    },
    watch:{
      area(area){
         this.searchOption.city=area
      }
    },
    methods: {

      onSearchResult(pois) {
        let latSum = 0;
        let lngSum = 0;
        if (pois.length > 0) {
          pois.forEach(poi => {
            let {lng,lat} =poi
            lngSum += lng;
            latSum += lat;
          });
          var address=pois[0]
          address.adecode=this.area
          this.$emit('update:address', address)
          this.markers=[pois[0].lng, pois[0].lat];
          let center = {
            lng: lngSum / pois.length,
            lat: latSum / pois.length
          };
          this.mapCenter = [center.lng, center.lat];
        }
      }
    }
  };
</script>
